<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.css"
    /> -->
    <title>draw-lottery</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      h1 {
        text-align: center;
        margin-top: 30px;
        margin-bottom: 30px;
      }
      .box {
        width: 600px;
        height: 200px;
        margin: 0 auto;
        border: 1px solid #ccc;
        border-radius: 10px;
        text-align: center;
        line-height: 200px;
        font-size: 36px;
      }
      .winner {
        font-size: 36px;
        font-weight: bold;
        color: green;
      }
      .btn {
        text-align: center;
        margin-top: 20px;
      }
      .btn button {
        padding: 10px 20px;
        font-size: 18px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <h1>幸运大抽奖</h1>
    <div class="box">
      <div class="winner">
        <span>幸运儿是：</span>
        此处显示幸运儿的名字
      </div>
    </div>
    <div class="btn">
      <button class="start">开始抽奖</button>
      <button class="end">结束抽奖</button>
    </div>
    <script>
      const arr = [
        "钱英杰",
        "韦嘉渝",
        "陈毅",
        "王欣怡",
        "胡鑫",
        "左宇成",
        "马欣悦",
        "刘补莲",
        "廖西平",
        "杨添杰",
        "陈熙",
        "蒋文博",
        "王舒雅",
        "扎西王加",
        "李楠",
        "杨玉坤",
        "敏秀雅",
        "杨馨竹",
        "苏静雯",
        "刘小溶",
        "吴意豪",
        "邵晓川",
        "钟星",
        "胡泊",
        "刁开芸",
        "王洋涵",
        "邱子芮",
        "苟雅娇",
        "许诗音",
        "张智雄",
        "李京城",
        "周紫萱",
        "雷雨田",
        "向文昱",
        "王一丁",
        "唐梓航",
        "张紫艺",
        "何芝萱",
        "黄玟菁",
        "张欣怡",
        "袁丽",
        "郎梓涵",
        "董昊林",
        "郑雯文",
        "刘祥云",
        "王欣",
        "张海峰",
        "徐鹏程",
        "王劼",
        "吴蕊语",
        "邓钰瀚",
        "彭之轩",
        "王语欣",
        "杨丹",
        "唐睿",
        "杨宇涵",
        "谭轶捷",
        "李海宁",
        "徐靖雯",
        "周文雯",
        "王紫珺",
        "蒲桃",
        "冯秋荣",
        "徐芯蕾",
        "吴所蔚",
        "杨梓琳",
        "刘怡鑫",
        "严铖淏",
        "许文渊",
        "陈玟筱",
        "钟雯俊",
        "王雨薇",
        "何一樊",
        "何欣林",
        "杨博睿",
        "王瑜杰",
        "肖怡心",
        "何诚志",
        "杨光明媚",
        "杨晨萱",
        "朱姝霖",
        "苗淼",
        "周铃鑫",
        "陈无非",
        "兰润麟",
        "袁艺嘉",
        "李培华",
      ];
      const winnerBox = document.querySelector(".winner");
      const startBtn = document.querySelector(".start");
      const endBtn = document.querySelector(".end");
      let randomIndex = 0; // 用于存储当前抽中的幸运儿索引
      // let intervalId;
      // 开始抽奖按钮事件
      startBtn.addEventListener("click", function () {
        let intervalId = setInterval(function () {
          randomIndex = Math.floor(Math.random() * arr.length);
          winnerBox.innerHTML = `<span>幸运儿是：</span>${arr[randomIndex]}`;
        }, 35);
        // 结束抽奖按钮事件（多点开始也能正常结束）
        endBtn.addEventListener("click", function () {
          clearInterval(intervalId);
          arr.splice(randomIndex, 1); // 删除已抽中的幸运儿
          if (arr.length === 1) {
            winnerBox.innerHTML = "<span>所有人都已抽中，抽奖结束！</span>";
            startBtn.disabled = true; // 禁用开始按钮
            endBtn.disabled = true; // 禁用结束按钮
          }
        });
      });
      // 结束抽奖按钮事件,此处多点一次开始后会报错
      // endBtn.addEventListener("click", function () {
      //   clearInterval(intervalId);
      // });
    </script>
  </body>
</html>
